<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';

const { t } = useI18n()

import StatisticsInfo from '../_components/header-info.vue';
import StatisticsDetail from '../_components/statistics-detail.vue';
import StatisticsList from '../_components/statistics-list.vue';

definePageMeta({
  layout: 'header-back',
  title: '统计数据'
});
const { isLogin, userInfo } = storeToRefs(useAppStore())
const {
  currentLevel,
  progress,
} = useVipInfo()

const _progressString = computed(() => `${+progress.value > 100 ? 100 : progress.value}%`)
const showDetail = ref(false)
const detailData = ref<any>([])
const betData = ref<any>([])
const {
  data: betReport,
  run: runMemberBetReport,
  loading: loadMemberBetReport,
} = useRequest(ApiMemberBetReport, {
  onSuccess(data) {
    betData.value = data
  },
})

onMounted(() => {
  if (userInfo.value?.username) {
    runMemberBetReport({ game_class: '', username: userInfo.value.username })
  }
})

watch(
  () => userInfo.value?.username,
  (newVal) => {
    if (newVal) {
      runMemberBetReport({ game_class: '', username: newVal })
    }
  },
  { immediate: true }
)

const tabList = [
  { label: t('all'), value: '' },
  { label: t('casino'), value: '1' },
  { label: t('sports'), value: '2' }
]
const activeTab = ref(0)
const setTab = (idx: number) => {
  activeTab.value = idx
  const selectedTab = tabList[idx]
  if (selectedTab && userInfo.value?.username) {
    runMemberBetReport({ 
      game_class: selectedTab.value as '' | '1' | '2',
      username: userInfo.value.username 
    })
  }
}

const formattedTableData = computed(() => {
  if (!betReport.value) return []
  return betReport.value.map(item => ({
    currency: item.currency_id,
    count: Number(item.bet_count),
    validBet: Number(item.valid_bet_amount),
    win: Number(item.net_amount),
    detail: item.detail
  }))
})

function goDetail(detail: any){
  showDetail.value = true
  detailData.value = detail
}
</script>

<template>
 <div class="statistics-modal-bg">
    <div class="statistics-modal">
      <StatisticsInfo :username="userInfo?.username || ''" :create-time="userInfo?.created_at || 0" />
      <!-- VIP进度条 -->
      <div class="vip-progress">
        <span>{{ t('currentLevel') }} VIP {{ userInfo?.vip || 0 }}</span>
        <span class="progress-label">{{ t('progress') }} <span class="progress-value">{{ _progressString }}</span></span>
        <div class="progress-bar-container">
          <div class="green-dot" :style="{ left: `calc(${_progressString} - 8.75px)` }"></div>
          <div class="progress-bar-bg">
            <div class="progress-bar" :style="{ width: _progressString }"></div>
          </div>
        </div>
      </div>
      <div class="statistics-wrapper">
        <!-- Tab切换 -->
        <div class="statistics-tabs">
          <div
            v-for="(tab, idx) in tabList"
            :key="tab.label"
            class="tab"
            :class="{ active: activeTab === idx }"
            @click="setTab(idx)"
          >
            {{ tab.label }}
          </div>
        </div>
        <StatisticsList v-if="!showDetail" :table-data="formattedTableData" @detail="goDetail" />
        <template v-else>
          <StatisticsDetail :table-data="detailData" />
          <BaseButton class="back-btn" @click="showDetail = false">{{ t('back') }}</BaseButton>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.statistics-modal-bg {
  background: #444;
}
.statistics-modal {
  background: #232626;
  width: 100%;
  margin: 0 auto;
  padding: 16px;
  color: #fff;
}
.back-btn {
  display: flex;
  width: 96%;
  margin: 0 2%;
  margin-top: 16px;
  padding: 8px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  background: var(--brand-linear, linear-gradient(90deg, #24EE89 0%, #9FE871 100%));
  box-shadow: 0px -2px 0px 0px #1DCA6A inset, 0px 0px 12px 0px rgba(35, 238, 136, 0.30);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px; /* 150% */
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 7px;
}
.user-detail {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.user-detail .nickname {
  font-size: 12.209px;
  font-style: normal;
  font-weight: 590;
}
.user-meta {
  width: 100%;
  font-size: 12px;
  color: #B3BEC1;
  display: flex;
  gap: 16px;
}
.vip-progress {
  border-radius: 10px;
  background: linear-gradient(91deg, rgba(149, 255, 236, 0.00) 0%, rgba(149, 255, 236, 0.00) 0.53%, rgba(115, 175, 168, 0.20) 98.76%), #323738;
  backdrop-filter: blur(1.5px);
  padding: 16px;
  margin-bottom: 8px;
}
.progress-label {
  float: right;
  color: #24EE89;
}
.progress-bar-container{
  position: relative;
  width: 100%;
  height: 8px;
  margin-top: 10px;
  background: #232626;
  border-radius: 8px;
}
.progress-bar-bg {
  background: #232626;
  border-radius: 8px;
  height: 8px;
  margin-top: 10px;
  width: 100%;
  overflow: hidden;
}
.green-dot {
    position: absolute;
    width: 17.5px;
    height: 17.5px;
    background: rgba(36, 238, 137, 0.3);
    border-radius: 50%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    z-index: 5;

    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8.7px;
      height: 8.7px;
      background-color: #24EE89;
      border-radius: 50%;
    }
  }
.progress-bar {
  background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
  height: 8px;
  border-radius: 8px;
}
.statistics-wrapper {
  border-radius: 8px;
  background: #323738;
  padding: 16px 14px;
}
.statistics-tabs {
  background: #292D2E;
  display: flex;
  gap: 8px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.tab {
  flex: 1;
  border-radius: 4px;
  padding: 8px 0;
  text-align: center;
  color: #B3BEC1;
  cursor: pointer;
}
.tab.active {
  background: #3A4142;
  color: #fff;
  border-radius: 4px;
}
</style>
